<template>
  <div>
    <el-collapse>
      <el-collapse-item v-for="(item,index) in responseBookList.data" :key="index" :title="item.day" :name="item.day">
        <el-card class="one-piece-card" shadow="always" v-for="(item1,index1) in item.timePeriodList" :key="index1" style="background-color: #f1f2f6">
          <div class="card-content">
            <div class="card-content-l">
              <span class="user-name">患者姓名:{{ item1.userName }}</span>
              <span class="user-sex">性别: {{ item1.userSex }}</span>
              <span class="user-age">年龄: {{item1.userAge}}</span>
            </div>
            <div class="card-content-r">
              <span style="width: 150px">排号:{{ item1.rank }}</span>
              <span style="width: 150px">{{ item1.startTime }} - {{ item1.endTime }}</span>
              <span style="width: 100px" :style="getStatusColor(item1.status)">{{ getStatus(item1.status) }}</span>
              <div style="width: 150px;">
                <el-button v-if="item1.status === 3" style="margin-left: 30px" type="primary" @click="start(item1)">开始问诊</el-button>
                <el-link :underline="false" v-if="item1.status === 5" style="margin-left: 30px;font-size: 17px;font-weight: bold" type="success" @click="showDetail(item1.orderUuid)">查看详情</el-link>
              </div>
            </div>
          </div>
        </el-card>
      </el-collapse-item>
      <el-empty description="没有数据" :style="getDisplayNone()" />
    </el-collapse>
    <el-pagination
      style="margin-top: 20px"
      background
      @current-change="handleCurrentChange"
      :current-page.sync="responseBookList.currentPage"
      :page-sizes="[responseBookList.pageSize]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="responseBookList.total">
    </el-pagination>

    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%">
      <h3>问诊记录</h3>
      <div style="margin-left: 15px">
        <h4>症状描述</h4>
        <el-card style="padding: 15px;background-color: rgba(192, 214, 149,0.4)">
          <span>{{responseRecord.userDescription}}</span>
        </el-card>
        <h4>医生诊断</h4>
        <el-card style="padding: 15px;background-color: rgba(192, 214, 149,0.4)">
          <span>{{responseRecord.doctorDescription}}</span>
        </el-card>
      </div>
      <h3>药方单</h3>
      <div style="margin-left: 15px">
        <h4>中药</h4>
        <el-card style="padding: 15px;background-color: rgba(224, 86, 253,0.1)">
          <el-card style="padding: 10px;background-color: rgba(255, 247, 153,0.8)">
            <div style="display: flex">
              <div>
                <el-tag
                  :key="index"
                  v-for="(item,index) in prescription.eastMedical.hospitalHave"
                  :disable-transitions="false"
                  style="margin-left: 10px;">
                  {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.medicalUnit)).length > 0 ?
                  optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.medicalUnit))[0].label : undefined }}
                </el-tag>
              </div>
              <div>
                <el-tag
                  style="margin-left: 10px"
                  :key="index"
                  type="danger"
                  v-for="(item,index) in prescription.eastMedical.hospitalHaveNot"
                  :disable-transitions="false">
                  {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.unit)).length > 0 ?
                  optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.unit))[0].label : undefined }}
                </el-tag>
              </div>
            </div>
          </el-card>
          <p style="font-size: 16px">副数: <span style="font-weight: bold"> {{ prescription.eastMedical.count }} </span> 副</p>
          <p style="font-size: 16px">服用详情: <span style="font-weight: bold"> {{ prescription.eastMedical.description }} </span></p>
        </el-card>
        <h4>中成/西药</h4>
        <el-card style="padding: 15px;background-color: rgba(213, 235, 225,0.8)">
          <div style="display: flex">
            <div>
              <el-tag
                style="margin-left: 10px;margin-bottom: 10px"
                :key="index"
                v-for="(item,index) in prescription.westMedical.hospitalHave"
                :disable-transitions="false">
                {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.medicalUnit)).length > 0 ?
                optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.medicalUnit))[0].label : undefined }}
                {{item.description}}
              </el-tag>
            </div>
            <div>
              <el-tag
                style="margin-left: 10px"
                :key="index"
                type="danger"
                v-for="(item,index) in prescription.westMedical.hospitalHaveNot"
                :disable-transitions="false">
                {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.unit)).length > 0 ?
                optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.unit))[0].label : undefined }}
                {{item.description}}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBookList, prescriptionBookUuid, recordBookUuid, startTreatment} from '../api/DoctorApi'

export default {
  name: 'DoctorBookChild',
  data () {
    return {
      prescription: {
        eastMedical: {
          hospitalHave: [
            // {
            //   medicalUnit: undefined,
            //   medicalName: undefined,
            //   medicalUuid: undefined,
            //   count: undefined
            // }
          ],
          hospitalHaveNot: [
            // {
            //   medicalName: undefined,
            //   count: undefined,
            //   unit: undefined
            // }
          ],
          description: undefined, // 怎么吃
          count: undefined// 几副
        },
        westMedical: {
          hospitalHave: [
            // {
            //   medicalUnit: undefined,
            //   medicalName: undefined,
            //   medicalUuid: undefined,
            //   count: undefined,
            //   description: undefined
            // }
          ],
          hospitalHaveNot: [
            // {
            //   medicalName: undefined,
            //   count: undefined,
            //   unit: undefined,
            //   description: undefined
            // }
          ]
        }
      },
      responseRecord: {
        recordUuid: undefined,
        bookUuid: undefined,
        userDescription: undefined,
        userStatus: undefined,
        doctorDescription: undefined,
        doctorStatus: undefined
      },
      responsePrescription: {
        prescriptionUuid: undefined,
        bookUuid: undefined,
        prescription: undefined
      },
      optionsInMedicalManageUnit: [{
        value: 1,
        label: '盒'
      }, {
        value: 2,
        label: '瓶'
      }, {
        value: 3,
        label: '袋'
      }, {
        value: 4,
        label: '克'
      }, {
        value: 5,
        label: '支'
      }, {
        value: 6,
        label: '粒'
      }],
      dialogVisible: false,
      requestBookList: {
        hospitalUuid: JSON.parse(localStorage.getItem('hospitalUuid')),
        status: [],
        judge: undefined,
        currentPage: 1,
        pageSize: 10
      },
      responseBookList: {
        currentPage: undefined,
        pageSize: undefined,
        lastPage: undefined,
        total: undefined,
        data: []
      },
      nowValue: undefined,
      nowChooseWeek: undefined
    }
  },
  computed: {
    getStatus () {
      return (status) => {
        switch (status) {
          case 1:
            return '已预约'
          case 2:
            return '已确认'
          case 3:
            return '叫号中'
          case 4:
            return '进行中'
          case 5:
            return '已完成'
        }
      }
    }
  },
  methods: {
    showDetail (orderUuid) {
      this.dialogVisible = true
      recordBookUuid({
        bookUuid: orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.responseRecord = res.data
        }
      })
      prescriptionBookUuid({
        bookUuid: orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.responsePrescription = res.data
          this.prescription = JSON.parse(this.responsePrescription.prescription)
        }
      })
    },
    start (item) {
      startTreatment({
        hospitalUuid: JSON.parse(localStorage.getItem('hospitalUuid')),
        bookUuid: item.orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.$router.push({path: '/book-record', query: {bookUuid: res.data.bookUuid}})
        }
      })
    },
    handleCurrentChange (val) {
      this.requestBookList.currentPage = val
      this.getBookDetail(this.nowValue, this.nowChooseWeek)
    },
    // 获取状态的颜色
    getStatusColor (status) {
      switch (status) {
        case 1:
          return 'color: #1e90ff'
        case 2:
          return 'color: #ff6b81'
        case 3:
          return 'color: #ffa502'
        case 4:
          return 'color: #8c7ae6'
        case 5:
          return 'color: #2ed573'
      }
    },
    getDisplayNone () {
      if (this.responseBookList.data.length === 0) {
        return 'display: flex'
      } else {
        return 'display: none'
      }
    },
    getBookDetail (value, chooseWeek) {
      this.nowValue = value
      this.nowChooseWeek = chooseWeek
      this.requestBookList.status = value
      this.requestBookList.judge = chooseWeek
      getBookList({
        hospitalUuid: this.requestBookList.hospitalUuid,
        status: this.requestBookList.status,
        judge: this.requestBookList.judge,
        currentPage: this.requestBookList.currentPage,
        pageSize: this.requestBookList.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.responseBookList.currentPage = res.data.currentPage
          this.responseBookList.lastPage = res.data.lastPage
          this.responseBookList.pageSize = res.data.pageSize
          this.responseBookList.total = res.data.total
          this.responseBookList.data = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.one-piece-card {
  margin-top: 20px;
}
.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-content-l {
    font-size: 16px;
    .user-name {
      margin-right: 100px;
    }
    .user-sex {
      margin-right: 100px;
    }
  }
  .card-content-r {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
  }
}
</style>
